import * as echarts from "echarts";
import { useEffect } from "react";

function Home() {
  var option;

  //保证我们获取的dom节点可用
  useEffect(() => {
    //获取我们渲染图表的DOM元素
    var chartDom = document.getElementById("main");
    // 图表初始化，生成图表实例
    var myChart = echarts.init(chartDom);

    // 使用图表的参数完成图表的渲染
    option && myChart.setOption(option);
  });

  //图表参数
  option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "bar",
      },
    ],
  };

  return (
    <div>
      <div
        className="chart"
        style={{ width: "600px", height: "400px" }}
        id="main"
      ></div>
    </div>
  );
}

export default Home;
